<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script src='js/jquery-3.6.0.min.js'></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
<style>
  *{margin:0;padding:0;}
  img{border:none;vertical-align:top;}
  html,body{width:100%;height:100%;overflow:hidden;background: linear-gradient( 225deg, #FBEBC9 0%, #ECE5CD 67%, #F9F7ED 100%);}

  div,img{
      margin: 0;
      padding: 0;
      border: 0 none;
      outline: 0px;
      tap-highlight-color: rgba(0,0,0,0);
      focus-ring-color: rgba(0, 0, 0, 0);
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-focus-ring-color: rgba(0, 0, 0, 0);
      -moz-tap-highlight-color: rgba(0,0,0,0);
      -moz-focus-ring-color: rgba(0, 0, 0, 0);
  }

  @font-face{
      font-family: 'zhonghei';
      src : url('font/zhonghei.ttf');
  }

  @font-face{
      font-family: 'zhenghei';
      src : url('font/zhenghei.ttf');
  }

  .zhonghei{
      font-family: 'zhonghei';
  }

  .zhenghei{
      font-family: 'zhenghei';
  }

  .div_left_menu{
      cursor:pointer;height:44px;line-height:44px;width:65%;text-align:center;margin-bottom:40px;
  }

  .div_left_menu_hover{
      background:#000;border-radius:22px;color:#fff;
  }
</style>
</head>
<body>
    <div style="position: relative;width:100%;height:100%;">
        <div id="div_left" style="float: left;width:23%;height:100%;">
            <div style="position: relative;width:100%;text-align: center;margin-top:120px;">
                <img src="images/logo.png" style="width:20%;" />
            </div>
            <div style="position: relative;width:100%;margin-top:100px;display:flex;justify-content: center;flex-wrap:wrap;marign-top:20px;font-size:16px;color: #1D1E25;font-style: normal;">
                <div onclick="cli_tiao(1);" class="div_left_menu zhenghei">预约列表</div>
                <div onclick="cli_tiao(2);" class="div_left_menu zhenghei">时间锁定管理</div>
                <div onclick="cli_tiao(3);" class="div_left_menu div_left_menu_hover zhonghei">来访记录</div>
            </div>
        </div>
        <div id="div_right" style="float:left;width:76%;margin-top:20px;">
            <div style="width:100%;background:rgba(255,255,255,0.55);box-shadow: 0px 10px 20px 0px rgba(190,142,56,0.24);border-radius: 30px;backdrop-filter: blur(4px);">
                <div style="width:97%;margin-left:1.5%;height: 68px;line-height: 68px;">
                    <span class="zhonghei" style="font-weight: normal;font-size: 20px;color: #BE8E38;line-height: 24px;font-style: normal;">飞鹤营养科技体验中心</span>
                    <span class="zhenghei" style="font-weight: normal;font-size: 18px;color: #1D1E25;line-height: 21px;font-style: normal;margin-left:16px;">预约管理系统</span>
                </div>
                <div style="position: relative;width:97%;margin-left:1.5%;margin-top:20px;">
                    <div style="position: relative;width:100%;height:36px;display: flex;align-items: center;justify-content: space-between;">
                        <div>
                            <span class="zhenghei" style="font-weight: normal;font-size: 18px;color: #1D1E25;font-style: normal;vertical-align:middle;">来访记录</span>
                            <span class="zhenghei" style="font-weight: normal;font-size: 12px;color: #B1B1B1;font-style: normal;vertical-align:middle;margin-left:10px;">共<span id="span_count">0</span>条</span>
                        </div>
                        <div style="display: flex;align-items: center;">
                            <div style="width:158px;height:34px;border:1px solid #E4E5E5;background: #fff;border-radius: 17px;margin-right:10px;">
                                <img src="images/search.png" style="width:16px;margin-left:10px;vertical-align: middle;" />
                                <input class="zhenghei" id="search" name="search" type="text" placeholder="搜索" style="margin-left:0px;width:112px;height:34px;border:0 none;" />
                            </div>
                            <div style="width:134px;height:34px;border:1px solid #E4E5E5;background: #fff;border-radius: 17px;margin-right:10px;">
                                <img src="images/rili.png" style="width:16px;margin-left:10px;vertical-align: middle;" />
                                <input class="zhenghei" type="text" id="rili" name="rili" placeholder="日期" style="margin-left:0px;width:92px;height:34px;border:0 none;" />
                            </div>
                            <div style="width:184px;height:34px;border:1px solid #E4E5E5;background: #fff;border-radius: 17px;">
                                <img src="images/filter.png" style="width:16px;margin-left:10px;vertical-align: middle;" />
                                <select onchange="change_type();" class="zhenghei" id="type" name="type" style="border:0 none;width:142px;height:34px;">
                                    <option value=""></option>
                                    <option value="1">内部学习/培训备份</option>
                                    <option value="2">产品/品牌体验备份</option>
                                    <option value="3">公众参观/科普教育备份</option>
                                    <option value="4">商业邀约/参观备份</option>
                                    <option value="5">社会团体/学术交流备份</option>
                                    <option value="6">VIP/定向邀约备份</option>
                                    <option value="7">政府考察/调研备份</option>
                                    <option value="8">媒体/机构备份</option>
                                    <option value="9">其他</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="div_content" class="zhenghei" style="position: relative;font-size:14px;width:100%;margin-top:20px;overflow-y:scroll;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;"></div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>

<script>
    var w = document.documentElement.clientWidth||document.body.clientWidth;
    var h = document.documentElement.clientHeight||document.body.clientHeight;
    $('#div_left').css({"height":h+"px"});

    var div_height = h - 20 - 68 - 20 - 36 - 20;

    $('#div_content').css({"height":div_height+"px"});
    $(function(){
        $( "#rili" ).datepicker();
        jQuery.datepicker.setDefaults({
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText, inst) {
                select_info();
            }
        });
        $('#search').on('keypress', function(e) {
            if (e.which == 13) {
                select_info();
            }
        });

        select_info();

    });

    function change_rili(){
        select_info();
    }

    function change_type(){
        select_info();
    }

    async function select_info(){
        try {
            const response = await axios.post('/admin/reservations/list', {
                search: $('#search').val(),
                type: $('#type').val(),
                rili: $('#rili').val()
            });
            
            if(response.data.code == 0){
				var ht = '';
				var data = response.data.data;
				for(var i=0;i<data.length;i++){
					ht += '<div style="width:97%;margin-left:1.5%;margin-bottom:30px;">';
					ht += '<div style="width:100%;font-weight: normal;font-size: 16px;color: #CCCCCC;line-height: 19px;font-style: normal;">'+data[i].reservation_date+'</div>';
					ht += '<div style="width:100%;margin-top:12px;">';
					var info = data[i].info;
					for(var j=0;j<info.length;j++){
						if(info[j].type == 1){
							var type = "内部学习/培训备份";
						}else if(info[j].type == 2){
							var type = "产品/品牌体验备份";
						}else if(info[j].type == 3){
							var type = "公众参观/科普教育备份";
						}else if(info[j].type == 4){
							var type = "商业邀约/参观备份";
						}else if(info[j].type == 5){
							var type = "社会团体/学术交流备份";
						}else if(info[j].type == 6){
							var type = "VIP/定向邀约备份";
						}else if(info[j].type == 7){
							var type = "政府考察/调研备份";
						}else if(info[j].type == 8){
							var type = "媒体/机构备份";
						}else if(info[j].type == 9){
							var type = "媒体/机构备份";
						}
						ht += '<div style="width:100%;margin-bottom:10px;font-style: normal;font-weight: normal;display: flex;align-items: center;justify-content: space-between;height: 54px;box-shadow: 0px 4px 10px 0px rgba(190,142,56,0.15);border-radius: 14px;background: #FFFFFF;">'+
									'<div style="width:80%;display: flex;align-items: center;margin-left:1.5%;">'+
										'<div>'+
											'<img src="images/clock.png" style="width:20px;vertical-align: middle;margin-right:10px;" /><span>'+info[j].reservation_time+'</span>'+
										'</div>'+
										'<div style="margin-left:24px;">'+
											'<img src="images/user.png" style="width:20px;vertical-align: middle;margin-right:10px;" /><span>'+info[j].realname+'</span><span style="margin-left:8px;color: #CCCCCC;">'+info[j].telephone+'</span>'+
										'</div>'+
										'<div style="margin-left:24px;">'+
											'<img src="images/user_more.png" style="width:20px;vertical-align: middle;margin-right:10px;" /><span>访客人数：'+info[j].visitor_number+'人</span>'+
										'</div>'+
										'<div style="margin-left:24px;">'+
											'<img src="images/user_type.png" style="width:20px;vertical-align: middle;margin-right:10px;" /><span>访客类型：'+type+'</span>'+
										'</div>'+
									'</div>'+
									'<div style="width:20%;margin-right:2.5%;text-align: right;">'+
										'<img onclick=\'cli_delete_reservation('+info[j].id+');\' src="images/trash.png" style="cursor:pointer;width:20px;vertical-align: middle;" />'+
									'</div>'+
								'</div>';
					}

					ht += '</div>';
					ht += '</div>';
				}
				$('#div_content').html(ht);
				$('#span_count').html(response.data.count);

                //$('#div_content').html(response.data.html);
                //$('#span_count').html(response.data.count);
            }
        } catch (error) {
            console.error('获取数据失败:', error);
            $('#div_content').html('<div style="text-align:center;padding:40px;color:#f44336;">获取数据失败</div>');
        }
    }

    async function cli_delete_reservation(id){
        if(confirm("确认是否删除？") == true){
            try {
                const response = await axios.post('/admin/reservations/delete', {
                    id: id
                });
                
                if(response.data.code == 0){
                    window.location.href = window.location.href;
                } else {
                    alert(response.data.msg || '删除失败');
                }
            } catch (error) {
                alert('删除失败: ' + (error.response?.data?.msg || error.message));
            }
        }
    }

    function cli_tiao(n){
        if(n == 1){
            window.location.href = "calendar.html";
        }else if(n == 2){
            window.location.href = "calendar.html?is_open=0";
        }else if(n == 3){
            window.location.href = "list.html";
        }
    }

</script>
</body>
</html> 